<template>
  <el-drawer with-header :visible.sync="open_course" direction="rtl" size="40%" :show-close="false" :modal="false"
    :wrapperClosable="false">


    <el-row :gutter="20">
      <el-col :span="12">
        <div class="ml30">
          <div class="grid-content bg-purple-dark    text-size-23-w700  ">退课退费</div>

          <div class="grid-content bg-purple     text-size-14 mt20 text-gray  ">为{{orderform.orderStudentName}}办理退课退费
          </div>

        </div>

      </el-col>
      <el-col :span="12">
        <div class="classflex-end">

          <el-button @click="cancel" style="width: 100px;margin-right: 100px;">取消</el-button>

        </div>

      </el-col>
    </el-row>


    <el-form :hide-required-asterisk="true" class=" ml30 mr30" ref="form" :model="form" :rules="rules_course"
      label-width="80px" label-position="top">
      <el-divider style="width: 80%;"></el-divider>

      <div class="classflex-space-between">
        <div class="mt10">{{orderform.orderTime}}经办</div>
        <div class="mt10">剩余{{orderform.residue}}课时，余额￥{{orderform.moneyUnconfirmed}}</div>
      </div>
      <el-row>
        <el-col :span="12">
          <div>
            <div class="classflex-space-between mt20">
              <div class="classflex-left mt10">
                <div class="">退课数量</div>
                <!-- <div class="ml20 text-green">全部</div> -->
              </div>

            </div>

            <el-form-item label=" " prop="refundCourseNumber">

              <el-input-number v-model="orderformresidue" controls-position="right" :min="0" :max="maxmoneyresidue"
                @change='handleChangeNumber'>
              </el-input-number>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <div class="mt30">
              <div class="mr10">退费金额</div>
            </div>
            <div class="mt20">
              <!-- {{ordermoney}} -->
              <el-input-number v-model="ordermoney" controls-position="right" :min="0" :max="1000000"
                @change='handleChange'>
              </el-input-number>
            </div>
          </div>
        </el-col>
      </el-row>



      <div class="mt20 mb20">
        ￥{{orderform.unitPrice}}/课时，应退:￥{{now_money}}，盈亏:￥{{profitandloss}}
      </div>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="refundform.orderRemark"></el-input>
      </el-form-item>

      <el-divider></el-divider>
      <div>
        <el-button type="primary" @click="refundMoney" style="width: 100%;">立即办理</el-button>
        <!-- <el-button @click="cancel">取 消</el-button> -->
      </div>
    </el-form>

  </el-drawer>
</template>

<script>
  import {
    listCourse,
    getCourse,
    delCourse,
    addCourse,
    updateCourse
  } from "@/api/course/course";
  import {
    listRefund,
    getRefund,
    delRefund,
    addRefund,
    updateRefund
  } from "@/api/refund/refund";
  import {
    listOrder,
    getOrder,
    delOrder,
    addOrder,
    updateOrder
  } from "@/api/order/order";
  export default {
    name: "Course",
    dicts: ['course_teaching_mode', 'course_state', 'course_subject'],
    data() {
      return {
        desc: "",
        num: 2,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 课程管理表格数据
        courseList: [],

        // 是否显示弹出层
        open_course: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          courseId: null,
          courseName: null,
          courseSubject: null,
          courseTeachingMode: null,
          courseAutoFinish: null,
          courseState: null,
          courseNowStudent: null,
          courseOverStudent: null,
          deptId: null,
          remark: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        },
        // 弹出层标题
        title: "",
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        orderform: {},
        refundform: {},
        rules_course: {


        },
        orderid: "",
        ordermoney: 0,
        maxmoney: 0,

        maxmoneyresidue: 0,
        orderformresidue: 0,
        now_money: 0,
        profitandloss: 0
      };
    },
    created() {
      // this.getList();
    },
    watch: {
      'orderformresidue': {
        handler() {
          //购买课时数

          this.now_money = parseInt(this.orderformresidue) * parseInt(this.orderform.unitPrice);

          this.profitandloss =  parseInt(this.now_money)-parseInt(this.ordermoney) ;
        }
      },
      'ordermoney': {
        handler() {
          //购买课时数

          this.profitandloss =  parseInt(this.now_money)-parseInt(this.ordermoney) ;


        }
      },


    },
    methods: {
      handleChangeNumber() {

      },

      getresidue() {
        var data = parseInt(this.orderform.actualAmountReceived) - parseInt(this.orderform.moneyDroppedTotal);

        if (this.orderform.actualAmountReceived != undefined) {
          this.maxmoney = data;

        } else {
          console.log("NaN222");
        }


        //  console.log(typeof( this.ordermoney));
        // console.log(typeof( this.maxmoney));
        return data;

      },
      GetOrderByID(orderId) {


        getOrder(orderId).then(response => {
          this.orderform = response.data;
          this.orderform.residue = parseInt(this.orderform.residue);
          this.maxmoneyresidue = parseInt(this.orderform.residue);
          this.orderformresidue = parseInt(this.orderform.residue);

          // var datamoney = parseInt(this.orderform.actualAmountReceived) - parseInt(this.orderform
          //   .moneyDroppedTotal);
          this.ordermoney = this.orderform.moneyUnconfirmed;

          console.log(this.ordermoney);
          console.log(typeof(this.ordermoney));
        });
      },

      /** 提交按钮 */
      refundMoney() {
        this.refundform.refundCourseNumber = this.orderformresidue;

        this.refundform.orderId = this.orderform.orderId;
        this.refundform.refundCourse = this.orderform.orderCourse;
        this.refundform.refundStudentName = this.orderform.orderStudentName;
        this.refundform.deptId = this.$store.state.user.deptId;
        //应退金额
        this.refundform.refundAmount = this.now_money;
        //实际退款
        this.refundform.refundAmountReality = this.ordermoney;
        //盈亏
         this.refundform.profitAndLoss = this.profitandloss;



        addRefund(this.refundform).then(response => {
          this.$modal.msgSuccess("退费成功");
          this.open_course = false;
           this.$emit('addRefundDrawerSuccess', 'addsuccess'); // 触发名为'childEvent'的自定义事件，并传递数据
        });


      },

      openaddrefund(id) {
        this.orderid = id;

        this.open_course = true;
        this.GetOrderByID(this.orderid);
      },
      // 取消按钮
      cancel() {
        this.open_course = false;
        // this.reset();
      },
      handleChange() {

      }

      /** 查询课程管理列表 */
      // getList() {
      //   this.loading = true;
      //   this.queryParams.deptId = this.$store.state.user.deptId;
      //   this.queryParams.courseState = "在开课程";
      //   listCourse(this.queryParams).then(response => {
      //     this.courseList = response.rows;
      //     this.total = response.total;
      //     this.loading = false;
      //   });
      // },

      // 表单重置
      // reset() {
      //   this.form = {
      //     id: null,
      //     courseId: null,
      //     courseName: null,
      //     courseSubject: null,
      //     courseTeachingMode: null,
      //     courseAutoFinish: null,
      //     courseState: null,
      //     courseNowStudent: null,
      //     courseOverStudent: null,
      //     deptId: null,
      //     delFlag: null,
      //     createBy: null,
      //     createTime: null,
      //     updateBy: null,
      //     updateTime: null,
      //     remark: null,
      //     remark2: null,
      //     remark3: null,
      //     remark4: null,
      //     remark5: null,
      //     remark6: null,
      //     remark7: null,
      //     remark8: null,
      //     remark9: null,
      //     remark10: null
      //   };
      //   this.resetForm("form");
      // },
      /** 搜索按钮操作 */
      // handleQuery() {

      // },



      /** 修改按钮操作 */
      // handleUpdate(row) {
      //   this.reset();
      //   const id = row.id || this.ids
      //   getCourse(id).then(response => {
      //     this.form = response.data;
      //     this.open_course = true;
      //     this.title = "修改课程管理";
      //   });
      // },
      /** 提交按钮 */
      // submitForm() {
      //   this.$refs["form"].validate(valid => {
      //     if (valid) {
      //       this.form.deptId = this.$store.state.user.deptId;
      //       if (this.form.id != null) {
      //         updateCourse(this.form).then(response => {
      //           this.$modal.msgSuccess("修改成功");
      //           this.open_course = false;


      //         });
      //       } else {
      //         addCourse(this.form).then(response => {
      //           this.$modal.msgSuccess("新增成功");
      //           this.open_course = false;
      //           this.$emit('AddCourseDrawerSuccess', 'AddCourseDrawer'); // 触发名为'childEvent'的自定义事件，并传递数据
      //           this.reset();
      //         });
      //       }
      //     }
      //   });
      // },
      /** 删除按钮操作 */
      // handleDelete(row) {
      //   const ids = row.id || this.ids;
      //   this.$modal.confirm('是否确认删除课程管理编号为"' + ids + '"的数据项？').then(function() {
      //     return delCourse(ids);
      //   }).then(() => {
      //     this.getList();
      //     this.$modal.msgSuccess("删除成功");
      //   }).catch(() => {});
      // },
      /** 导出按钮操作 */
      // handleExport() {
      //   this.download('course/course/export', {
      //     ...this.queryParams
      //   }, `course_${new Date().getTime()}.xlsx`)
      // }
    }
  };
</script>
<style scoped lang="scss">
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }

    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }

    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    font-family: "open sans",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
</style>
